<template>
	<view class="container" v-if="fLightInfo">
		<!-- 通知公告 -->
		<view class="inform">
			<uni-notice-bar showIcon="true" text="今天，广东省实施外国人144小时过境免签政策新闻通气会在白云机场T2航站楼举行。">
			</uni-notice-bar>
		</view>
		
		<uni-segmented-control v-if="!id" :current="current" :values="items.map(v => v.title)" @clickItem="onClickItem"
			styleType="text" activeColor="#fccf01">
		</uni-segmented-control>

		<!-- 航班信息 -->
		<view class="flight">
			<view class="up">
				<text>{{fLightInfo.companyName | getFlightName}}{{fLightInfo.name}}</text>
				<text>{{fLightInfo.aircraftName}}</text>
				<text>{{fLightInfo.startTime | getDate}}</text>
			</view>
			<view class="middle">
				<view class="start">
					<view class="time">{{fLightInfo.startTime | getTime}}</view>
					<view>{{fLightInfo.startAirportName |getAirport}}</view>
				</view>
				<view class="lineTo">
					<image src="../../../static/icon/arrow.png" mode="widthFix"></image>
				</view>
				<view class="end">
					<view class="time">{{fLightInfo.endTime | getTime}}</view>
					<view>{{fLightInfo.endAirportName |getAirport}}</view>
				</view>
			</view>
			<view class="down">
				<text>舒适宽体机</text>|
				<text>{{fLightInfo.isFan | getFan}}</text>|
				<text>免费行李</text>|
				<text>出票速度快</text>
			</view>
		</view>

		<!-- 选择仓位 -->
		<view class="seatLv">
			<radio-group @change="radioChange">
				<view class="seatLv-con">
					<label>
						<text>经济舱</text>
						<picker class="seat" @change="seatPickerChange1" :value="seatIndex1" :range="seatArray">
							<view>座位：{{seatArray[seatIndex1]}}></view>
						</picker>
						<text class="price">¥{{fLightInfo.commonCost}}</text>
						<radio :value="1" />
					</label>
					<view class="yuTicket">
						<text class="yuTicket-txt">{{SurplusTicket.commonSurplus}} </text>
						<text>张余票</text>
					</view>
				</view>

				<view class="seatLv-con">
					<label>
						<text>商务舱</text>
						<picker class="seat" @change="seatPickerChange2" :value="seatIndex2" :range="seatArray">
							<view>座位：{{seatArray[seatIndex2]}}></view>
						</picker>
						<text class="price">¥{{fLightInfo.businessCost}}</text>
						<radio :value="2" />
					</label>
					<view class="yuTicket">
						<text class="yuTicket-txt">{{SurplusTicket.bussinessSurplus}} </text>
						<text>张余票</text>
					</view>
				</view>

				<view class="seatLv-con">
					<label>
						<text>头等舱</text>
						<picker class="seat" @change="seatPickerChange3" :value="seatIndex3" :range="seatArray">
							<view>座位：{{seatArray[seatIndex3]}}></view>
						</picker>
						<text class="price">¥{{fLightInfo.firstCost}}</text>
						<radio :value="3" />
					</label>
					<view class="yuTicket">
						<text class="yuTicket-txt">{{SurplusTicket.firstSurplus}} </text>
						<text>张余票</text>
					</view>
				</view>
			</radio-group>
		</view>

		<!-- 用户信息 -->
		<view class="userInfo">
			<text>乘机人</text>
			<button @click="addPerson">添加乘机人</button>
			<view class="user-msg"  v-show="isAdd">
				<text>乘客信息</text>
				<view>
					<text>姓名：</text>
					<text>{{peopleInfo.lastName}}{{peopleInfo.firstName}}</text>
				</view>
				<view>
					<text>手机：</text>
					<text>{{peopleInfo.telephone}}</text>
				</view>
				<view>
					<text>身份证：</text>
					<text>{{peopleInfo.id}}</text>
				</view>
			</view>
		</view>
		
		<!-- 推荐喜欢 -->
		<view class="planeList" v-if="recLoveList.length">
			<view class="zhuan">购买过该机票的用户可能还喜欢...</view>
			<navigator :url="`ticketOrder?id=${item.airlineId}`" class="planeList-item" v-for="(item,index) in recLoveList" :key="index">
				<view class="up-con">
					<view class="left">
						<view class="time">
							<text>{{item.startTime | getTime}}</text>
							<text>——</text>
							<text>{{item.endTime | getTime}}</text>
						</view>
						<view class="place">
							<text>{{item.startAirportName | getAirport}}</text>
							<text>——</text>
							<text>{{item.endAirportName | getAirport}}</text>
						</view>
					</view>
					<view class="right">
						<view class="price">
							<span>¥</span>
							<text>{{item.commonCost}}</text>
						</view>
						<view class="seatLv1">
							<text>经济舱{{item.companyDiscount | getDisCount}}</text>
						</view>
					</view>
				</view>
				<view class="down-con">
					<text>{{item.companyName | getFlightName}}</text>
					<text>{{item.name}}</text>—
					<text>{{item.aircraftName}}</text>—
					<text>{{item.isFan | getFan}}</text>
				</view>
			</navigator>
		</view>
		
		<!-- 推荐相似 -->
		<view class="planeList" v-if="recLikeList.length">
			<view class="zhuan">  </view>
			<navigator :url="`ticketOrder?id=${item.airlineId}`" class="planeList-item" v-for="(item,index) in recLikeList" :key="index">
				<view class="up-con">
					<view class="left">
						<view class="time">
							<text>{{item.startTime | getTime}}</text>
							<text>——</text>
							<text>{{item.endTime | getTime}}</text>
						</view>
						<view class="place">
							<text>{{item.startAirportName | getAirport}}</text>
							<text>——</text>
							<text>{{item.endAirportName | getAirport}}</text>
						</view>
					</view>
					<view class="right">
						<view class="price">
							<span>¥</span>
							<text>{{item.commonCost}}</text>
						</view>
						<view class="seatLv1">
							<text>经济舱{{item.companyDiscount | getDisCount}}</text>
						</view>
					</view>
				</view>
				<view class="down-con">
					<text>{{item.companyName | getFlightName}}</text>
					<text>{{item.name}}</text>—
					<text>{{item.aircraftName}}</text>—
					<text>{{item.isFan | getFan}}</text>
				</view>
			</navigator>
		</view>
		
		<!-- 占位 -->
		<view class="blank"></view>

		<!-- 底部购票栏 -->
		<view class="buyTicket">
			<view class="money" v-if="id">
				<text>{{currentPrice}}¥</text>
			</view>
			<!-- 换乘总价 -->
			<view class="money" v-else>
				<text>{{currentTotalPrice}}¥</text>
			</view>
			<view class="btn">
				<button @click="buyTicketClick">抢票</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		buyTicket,
		airline,
		recommendAirlineLove,
		recommendAirlineLike,
		countSurplusTicket
	} from '../../../common/request.js'
	import {
		formatDate
	} from "../../../common/utils.js"

	export default {
		data() {
			return {
				fLightInfo: {},       // 航班信息
				fLightInfoHuan:{},    // 换乘
				items: [{
						title: "1程购票"
					},
					{
						title: "2程购票"
					}
				],
				buyTicketInfo: {      // 购买信息
					userId: '',
					airLineId: '',
					seatPosition: '',
					seatClass: ''
				}, 
				buyTicketInfo2:{      // 换乘的第一程票
					userId: '',
					airLineId: '',
					seatPosition: '',
					seatClass: ''
				},
				currentPrice: 0,      // 当前价格
				currentTotalPrice:0,  // 换乘总价
				seatArray: ['靠窗', '过道', '普通'],
				seatIndex1: 0,
				seatIndex2: 0,
				seatIndex3: 0,
				isAdd:false,          // 是否添加联系人
				peopleInfo:{},
				current: 0,
				id:'',                // 上个页面传来的普通id
				huanId:{              // 换乘，上个页面传来的id
					huanId1:'',
					huanId2:''
				},
				recLoveList:[],       // 推荐喜欢的航班
				recLikeList:[],       // 推荐相似的航班
				SurplusTicket:[],     // 余票
				selectedSeat:'',      // 当前选择的座位
			};
		},
		filters: {
			getTime(time) {
				let date = new Date(time)
				return formatDate(date, 'hh:mm')
			},
			getDate(time) {
				let date = new Date(time)
				return formatDate(date, 'MM月dd日')
			},
			// 因为加载顺序（生命周期）的问题导致先执行的时候为空，做个空数据就好了
			getAirport(port) {
				return (port || "").slice(0, 4)
			},
			getFlightName(fly) {
				return (fly || "").slice(0, 1) + (fly || "").slice(2, 3)
			},
			getFan(fan) {
				return fan == 0 ? "有餐食" : "无餐食"
			},
			getDisCount(count) {
				return count == 1 ? "" : count + "折"
			},
		},
		methods: {
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
					if(this.current===0){
						this.buyTicketInfo.airLineId = this.huanId.huanId1
						airline(this.huanId.huanId1).then(res => {
							this.fLightInfo = res.data[0]
							// 获取推荐数据
							this.getRec()
							
							// 计算换乘总价
							switch(this.selectedSeat){
								case '1':
									this.currentTotalPrice=this.fLightInfo.commonCost
									break
								case '2':
									this.currentTotalPrice=this.fLightInfo.businessCost
									break
								case '3':
									this.currentTotalPrice=this.fLightInfo.firstCost
									break
							}
						})
						// 查询余票
						countSurplusTicket(this.huanId.huanId1).then(res=>{
							this.SurplusTicket=res.data
						})
					}else{
						this.buyTicketInfo.airLineId = this.huanId.huanId2
						airline(this.huanId.huanId2).then(res => {
							this.fLightInfo = res.data[0]
							// 获取推荐数据
							this.getRec()
							
							getApp().globalData.firstInfo[1]=this.buyTicketInfo
						})
						// 查询余票
						countSurplusTicket(this.huanId.huanId2).then(res=>{
							this.SurplusTicket=res.data
						})
						
						// 计算换乘总价
						switch(this.selectedSeat){
							case '1':
								this.currentTotalPrice+=this.fLightInfo.commonCost
								break
							case '2':
								this.currentTotalPrice+=this.fLightInfo.businessCost
								break
							case '3':
								this.currentTotalPrice+=this.fLightInfo.firstCost
								break
						}
					}
				}
			},
			// 添加乘客
			addPerson(){
				if(!this.$store.state.isLogin){
					uni.showToast({
						icon: "none",
						duration: 1500,
						title: "请先登录"
					})
					setTimeout(()=>{
						uni.reLaunch({
							url: '/pages/about/about'
						})
					},1000)
					return
				}
				this.isAdd=true
				// 保存第一程信息
			},
			// 获取选舱价格
			radioChange(evt) {
				this.selectedSeat=evt.detail.value
				switch (evt.detail.value) {
					case '1':
						this.currentPrice = this.fLightInfo.commonCost
						// 换乘价格计算
						this.currentTotalPrice=this.fLightInfo.commonCost
						this.buyTicketInfo.seatClass = "经济舱"
						this.buyTicketInfo.seatPosition = this.seatIndex1 + 1
						break
					case '2':
						this.currentPrice = this.fLightInfo.businessCost
						// 换乘价格计算
						this.currentTotalPrice=this.fLightInfo.businessCost
						this.buyTicketInfo.seatClass = "商务舱"
						this.buyTicketInfo.seatPosition = this.seatIndex2 + 1
						break
					case '3':
						this.currentPrice = this.fLightInfo.firstCost
						// 换乘价格计算
						this.currentTotalPrice=this.fLightInfo.firstCost
						this.buyTicketInfo.seatClass = "头等舱"
						this.buyTicketInfo.seatPosition = this.seatIndex3 + 1
						break
				}
			},
			// 买票
			buyTicketClick() {
				if(!this.$store.state.isLogin){
					uni.showToast({
						icon: "none",
						duration: 1500,
						title: "请先登录"
					})
					setTimeout(()=>{
						uni.reLaunch({
							url: '/pages/about/about'
						})
					},1000)
					return
				}
				if (this.currentPrice == 0) {
					uni.showToast({
						icon: "none",
						duration: 1500,
						title: "请先选择舱位"
					})
					return
				}
				// 买换乘票
				if(!this.id){
					this.buyTicketInfo.airLineId=this.huanId.huanId1
					buyTicket(this.buyTicketInfo).then(res => {
						uni.showToast({
							icon: "none",
							duration: 1000,
							title: res.message
						})
					})
					setTimeout(()=>{
						this.buyTicketInfo.airLineId=this.huanId.huanId2分割线从
						buyTicket(this.buyTicketInfo).then(res => {
							uni.showToast({
								icon: "none",
								duration: 1000,
								title: res.message
							})
							// 跳转到订单界面
							setTimeout(()=>{
								uni.navigateTo({
									url: '/pages/about/aboutPages/order'
								})
							},1000)
						})
					},1000)
					return
				}
				// 买一张票
				buyTicket(this.buyTicketInfo).then(res => {
					uni.showToast({
						icon: "none",
						duration: 1000,
						title: res.message
					})
					// 跳转到订单界面
					setTimeout(()=>{
						uni.navigateTo({
							url: '/pages/about/aboutPages/order'
						})
					},1000)
				})
			},
			// 选座位
			seatPickerChange1(e) {
				this.seatIndex1 = e.target.value
				this.buyTicketInfo.seatPosition = Number(e.target.value) + 1
			},
			seatPickerChange2(e) {
				this.seatIndex2 = e.target.value
				this.buyTicketInfo.seatPosition = Number(e.target.value) + 1
			},
			seatPickerChange3(e) {
				this.seatIndex3 = e.target.value
				this.buyTicketInfo.seatPosition = Number(e.target.value) + 1
			},
			// 获取航班推荐
			getRec(){
				this.recLoveList=[]
				this.recLikeList=[]
				recommendAirlineLove(this.fLightInfo.name,this.fLightInfo.startTime).then(res=>{
					res.data.forEach((value,index,array)=>{
						// 获取前3条
						if(index<3){
							this.recLoveList.push(value)
						}
					})
				})
				recommendAirlineLike(this.fLightInfo.name,this.fLightInfo.endTime).then(res=>{
					res.data.forEach((value,index,array)=>{
						if(index<3){
							this.recLikeList.push(value)
						}
					})
				})
			}
		},
		// 监听页面加载，其参数为上个页面传递的数据，参数类型为 Object
		onLoad(options) {
			// 查询航线信息
			this.id=options.id
			if(options.id){
				this.buyTicketInfo.airLineId = options.id
				airline(options.id).then(res => {
					this.fLightInfo = res.data[0]
					this.getRec()
				})
				// 查询余票
				countSurplusTicket(options.id).then(res=>{
					console.log(res.data);
					this.SurplusTicket=res.data
				})
			}else{
				this.huanId.huanId1=options.id1
				this.huanId.huanId2=options.id2
				this.buyTicketInfo.airLineId = this.huanId.huanId1
				airline(options.id1).then(res => {
					this.fLightInfo = res.data[0]
					this.getRec()
				})
				// 查询余票
				countSurplusTicket(options.id1).then(res=>{
					this.SurplusTicket=res.data
				})
			}
			// 获取乘客信息
			this.peopleInfo=this.$store.state.userInfo
			this.buyTicketInfo.userId=this.$store.state.userInfo.userId
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: $uni-color-bg;

		.inform {}

		// 航班信息
		.flight {
			margin: 0 20rpx 20rpx 20rpx;
			padding: 30rpx;
			border-radius: 10rpx;
			background-color: white;

			.up {
				font-size: 26rpx;
				display: flex;
				justify-content: space-around;
				margin-bottom: 10rpx;
				// text:nth-of-type(1){

				// }
			}

			.middle {
				display: flex;
				justify-content: space-around;

				.time {
					font-size: 42rpx;
					font-weight: 700;
					margin-bottom: 10rpx;
				}
				
				.lineTo{
					width: 100rpx;
				}
			}

			.down {
				font-size: 26rpx;
				color: #cbcbcb;
				margin-top: 20rpx;
				display: flex;
				justify-content: space-around;
			}
		}

		// 选舱选座
		.seatLv {
			margin: 20rpx;
			padding: 30rpx;
			border-radius: 10rpx;
			background-color: white;

			.seatLv-con {
				height: 110rpx;
				// display: flex;
				position: relative;
				border-bottom: 2rpx #eee solid;
				margin-top: 20rpx;
				
				// 余票
				.yuTicket{
					margin-top: 5px;
					margin-left: 200rpx;
					.yuTicket-txt{
						font-size: 32rpx;
						color: #fe9812;
					}
				}

				text:nth-of-type(1) {
					color: #000;
					font-weight: 500;
					font-size: 34rpx;
				}

				.seat {
					margin-top: 10rpx;
					position: absolute;
					top: 0;
					left: 200rpx;
				}

				.price {
					position: absolute;
					top: 0;
					right: 100rpx;
					color: orange;
					font-size: 36rpx;
				}

				radio {
					position: absolute;
					top: 0;
					right: 0;
				}
			}
		}

		// 用户信息
		.userInfo {
			margin: 0 20rpx 20rpx 20rpx;
			padding: 30rpx;
			border-radius: 10rpx;
			background-color: white;
			
			text:nth-of-type(1){
				font-size: 36rpx;
			}
			
			.user-msg{
				padding-top: 20rpx;
				border-top: #eee solid 3rpx;
				view{
					margin-left: 20rpx;
					font-size: 28rpx;
					color: black;
					text{
						font-size: 28rpx;
					}
				}
			}
			
			button {
				margin: 30rpx 50rpx;
				color: #1f90eb;
				background-color: #ecf5fc;
			}
		}
		
		// 航班列表
		.planeList {
			// 换乘
			.zhuan{
				font-size: 32rpx;
				color: white;
				margin-left: 20rpx;
			}
			.planeList-item {
				border-radius: 10rpx;
				background-color: white;
				margin: 15rpx 25rpx;
				padding: 20rpx;
		
				// 上部分，上两行
				.up-con {
					display: flex;
					// justify-content: space-around;
		
					.left {
						margin-left: 40rpx;
						flex: 10;
						.time {
							color: black;
							font-size: 36rpx;
							margin-bottom: 15rpx;
						}
					}
		
					.right {
						flex: 3;
						.price {
							font-size: 48rpx;
							font-weight: 700;
							color: orange;
							span{
								margin-right: 5rpx;
								font-size: 24rpx;
								font-weight: 500;
							}
						}
					}
				}
				
				.down-con{
					margin-top: 15rpx;
					font-size: 26rpx;
					text:nth-of-type(4){
						color: green;
					}
				}
				
				.transfer{
					border-top: dashed 4rpx #eee;
					padding-top: 10rpx;
					.transfer1{
						display: flex;
						justify-content: space-around;
						text:nth-of-type(1){
							background-color: #fbeb64;
							border-radius: 10rpx;
							padding: 5rpx 10rpx;
						}
					}
					.transfer2{
						margin-top: 8rpx;
						display: flex;
						justify-content: space-around;
						text:nth-of-type(1){
							background-color: #fbeb64;
							border-radius: 10rpx;
							padding: 5rpx 10rpx;
						}
					}
				}
			}
		}
		
		.blank{
			height: 1rpx;
			margin-bottom: 135rpx;
		}

		// 购买
		.buyTicket {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			height: 136rpx;
			background-color: white;
			display: flex;
			justify-content: space-between;
			align-items: center;

			text {
				margin-left: 50rpx;
				color: $uni-color-btn;
				font-size: 42rpx;
				font-weight: 700;
			}

			button {
				margin-right: 50rpx;
				width: 200rpx;
				color: white;
				background-color: $uni-color-btn;
			}
		}
	}
</style>
